<script setup>
import blogPageOne from '@/components/blog-components/blog-PageOne.vue'
import articleLists from '@/components/blog-components/article-lists.vue'
import articleLists2 from '@/components/blog-components/article-lists2.vue'

const articles = [
    {
        author: 'Author',
        title: '建站的事情',
        content: '关于博客网站的记录文章帖子，正常了！',
        time: '2025年9月28日下午2点26分'
    },
    {
        author: '张三',

        title: '文章2',
        content: '这是文章2的详细内容，切换效果正常了！',
        time: '2025年9月28日下午2点26分'

    },
    {
        author: 'Author',
        title: '文章2',
        content: '这是文章2的详细内容，切换效果正常了！',
        time: '2025年9月28日下午2点26分'
    }
]
</script>

<template>
    <div class="main">
        <blogPageOne>
            <div class="new-message">
                <div class="wrapper">
                    <div class="item item1">2025/09/30 更新主页</div>
                    <div class="item item2">2025/09/30 更新主页</div>
                    <div class="item item3">2025/09/30 更新主页</div>
                    <div class="item item4">2025/09/30 更新主页</div>
                </div>
            </div>
            <articleLists2 :articles="articles"></articleLists2>
        </blogPageOne>
        <div class="my-info">
            <myInfoOne></myInfoOne>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@use '@/assets/variables.scss' as *;

.main {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.new-message {
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 16px;
    &::before {
        content: '最新动态';
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        z-index: 1;
    }
    .wrapper {
        margin-inline: auto;
        position: relative;
        height: 100%;
        overflow: hidden;
        mask-image: linear-gradient(to right,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 1) 20%,
                rgba(0, 0, 0, 1) 80%,
                rgba(0, 0, 0, 0));

        @keyframes scrollleft {
            to {
                left: -300px;
            }
        }

        .item {
            width: 300px;
            height: 100%;
            background-color: #666;
            border-radius: 6px;
            position: absolute;
            left: max(calc(300px * 4), 100%);
            animation: scrollleft 20s linear infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            &::after{
                content: '->->->->->';
                position: absolute;
                top: 0;
                left: 100%;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }
        }

        .item1 {
            animation-delay: calc(20s / 4 * (4 - 1) * -1);
            /* 负数控制动画那一刻播放 */
        }

        .item2 {
            animation-delay: calc(20s / 4 * (4 - 2) * -1);
        }

        .item3 {
            animation-delay: calc(20s / 4 * (4 - 3) * -1);
        }

        .item4 {
            animation-delay: calc(20s / 4 * (4 - 4) * -1);
        }
    }
}

.my-info {
    margin-left: 20px;
    width: 300px;
    height: calc(100vh - 80px);
    position: sticky;
    top: 40px;
    border-radius: 10px;
    color: white;
    padding: 20px;
    box-shadow: -2px -2px 1px rgba(0, 0, 0, 0.1);
    background: var(--header-color);

    @media (max-width: 820px) {
        & {
            display: none;
            margin: 0;
        }
    }
}
</style>